<template>
  <div class="cultivated_wrapper">
    <div class="pageTitle">
      <div class="cultivated_title">耕地质量监测平台</div>
      <div class="copyright">Cultivated land quality monitoring platform</div>
      <div class="date">数据统计</div>
      <div class="system">系统设置</div>
      <div class="user">用户登录</div>
    </div>
    <div class="pageBody">
      <!-- 左侧图表 -->
      <div class="pageLeft">
        <div class="l_t">
          <div class="left_title">耕地类型统计</div>
          <div class="echarts_box">
            <echarts-box :option="state.landTotal"></echarts-box>
          </div>
        </div>
        <div class="l_m">
          <div class="m_title">各耕地产量统计</div>
          <div class="l_m_m">
            <div v-for="item in 4" :key="item">
              <div>0.93</div>
              <div>年产量（亿吨）</div>
            </div>
          </div>
          <div class="l_m_b">
            <div class="b_left">
              <div>耕地1</div>
              <div>耕地2</div>
              <div>耕地3</div>
            </div>
            <div class="b_right">
              <div v-for="item in 3" :key="item">
                <echarts-box :option="state.gengdi"></echarts-box>
              </div>
            </div>
          </div>
        </div>
        <div class="l_b">
          <div class="div_title">耕地农作物统计</div>
          <div class="pic">
            <img src="@/images/cultivated/4.png" class="bgImg" alt="">
          </div>
          <template v-for="(item, i) in 6" :key="i">
            <div :class="'i_' + (i + 1)">
              <div>162</div>
              <div>玉米（亩）</div>
            </div>
          </template>
        </div>
      </div>

      <!-- 中间部分 -->
      <div class="pageMiddle">
        <div class="m_t">
          <div class="land_item" v-for="(item, i) in state.lands" :key="i">
            <div class="land_name">{{ item.name }}</div>
            <div class="land_value">{{ item.value }} <span>平方米</span></div>
          </div>
        </div>
        <div class="m_m"></div>
        <div class="m_b">
          <div v-for="item in state.landsType" :key="item">
            <span :class="item.color"></span>{{ item.name }}
          </div>
        </div>
      </div>

      <!-- 右侧图表 -->
      <div class="pageRight">
        <!-- 耕地质量统计 -->
        <div class="r_t">
          <div class="r_t_title">耕地质量统计</div>
          <div class="echarts_box">
            <echarts-box :option="state.zhiliangtongji"></echarts-box>
          </div>
        </div>

        <!-- 耕地利用率统计 -->
        <div class="r_m">
          <div class="r_m_title">耕地利用率统计</div>
          <div class="echarts_box">
            <echarts-box :option="state.landPercent"></echarts-box>
          </div>
        </div>

        <!-- 灾害信息报警 -->
        <div class="r_b">
          <div class="warning">灾害信息报警</div>
          <div class="list_wrapper">
            <template v-for="(item, i) in state.warningList" :key="i">
              <div :class="[
                { 'warning_list first': i == 0 },
                { 'warning_list second': i == 1 },
                { 'warning_list third': i == 2 },
                { 'warning_list normal': i > 2 },
              ]">
                <div :class="[
                  { 'num red': i == 0 },
                  { 'num yellow': i == 1 },
                  { 'num green': i == 2 },
                  { 'num blue': i == 3 },
                  { 'num purple': i == 4 },
                ]">
                  {{ i + 1 }}
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="hot" v-if="i < 2"><span>热</span></div>
                <div class="hot" v-if="i == 2"><span class="new">新</span></div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import echartsBox from "@/components/echarts-box.vue";
import * as echarts from "echarts";
import { onMounted, reactive } from 'vue-demi';
const state = reactive({
  source: {
    data: [122, 144, 313, 414, 119],
    indicator: [
      { name: "湿度", max: 222 },
      { name: "墒情", max: 442 },
      { name: "黑土", max: 332 },
      { name: "密度", max: 442 },
      { name: "含氟量", max: 992 },
    ],

  },
  lands: [
    {
      name: "土地总面积",
      value: "47456",
    },
    {
      name: "总户籍数",
      value: "58928",
    },
    {
      name: "土地流失",
      value: "28182",
    },
    {
      name: "城镇农村土地占比",
      value: "58928",
    },
  ],
  // 耕地类型
  landsType: [
    {
      name: "耕地类型",
      color: "green",
    },
    {
      name: "耕地类型",
      color: "blue",
    },
    {
      name: "耕地类型",
      color: "green",
    },
    {
      name: "耕地类型",
      color: "blue",
    },
  ],
  // 灾害告警信息
  warningList: [
    {
      title: "病虫害报警",
    },
    {
      title: "干旱报警",
    },
    {
      title: "洪涝报警",
    },
    {
      title: "土壤湿度",
    },
    {
      title: "空气湿度",
    },
  ],
  // 耕地类型统计
  landTotal: {
    backgroundColor: "rgba(0,0,0,0)",
    grid: { top: "15%", left: "10%", right: "5%", bottom: "10%" },
    tooltip: {
      trigger: "axis",
      formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%",
    },
    legend: {
      data: ["数据1", "数据2"],
      x: "right", //居右显示
    },
    xAxis: {
      axisTick: {
        //x轴刻度线
        show: false,
      },
      axisLabel: { show: false }, //显示x轴的数值

      data: [
        "玉米",
        "水稻",
        "小麦",
        "玉米1",
        "水稻1",
        "小麦1",
        "玉米2",
        "水稻2",
      ],
    },
    yAxis: [
      {
        type: "value",
        // name: "数据1",
        show: true,
        scale: true,
        max: 100,
        min: 0,
        splitNumber: 5,
        boundaryGap: [0.2, 0.2],
        // axisLabel: { show: false }, //显示x轴的数值

        axisLine: {
          lineStyle: {
            color: "#5e859e",
            width: 2,
          },
        },
      },
      {
        type: "value",
        // name: "数据2",
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: { show: false }, //显示x轴的数值

        axisLine: {
          lineStyle: {
            color: "#5e859e", //纵坐标轴和字体颜色
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: "数据1",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          barBorderRadius: [6, 6, 0, 0],
        },
        data: [15, 20, 35, 40, 50, 60, 99, 88],
      },
      {
        name: "数据2",
        type: "line",
        smooth: true,
        symbolSize: 8, //设定实心点的大小
        itemStyle: {
          normal: {
            color: "#fff", //改变折线点的颜色
            lineStyle: {
              color: "#E85D61", //改变折线颜色
              width: 5, // 0.1的线条是非常细的了
            },
          },
        },
        data: [15, 30, 21, 20, 20, 30, 50, 90],
      },
    ],
  },

  // 耕地利用率统计
  landPercent: {
    backgroundColor: "rgba(0,0,0,0)",
    grid: { top: "10%", left: "12%", right: "5%", bottom: "15%" },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["06月", "07月", "08月", "09月", "10月", "11月", "12月"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0.1, color: "#20FFE7" },
              { offset: 1, color: "#1A48C8" },
            ]),
          },
        },
        showSymbol: false,
        itemStyle: {
          normal: {
            color: "#8cd5c2", //改变折线点的颜色
            lineStyle: {
              color: "#3FFFFF", //改变折线颜色
            },
          },
        },
      },
    ],
  },

  // 耕地
  gengdi: {
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
      top: 5,
      bottom: 0,
      left: "2%",
      right: "2%",
    },
    xAxis: {
      show: false,
      type: "value",
      boundaryGap: [0, 0],
    },
    yAxis: [
      {
        type: "category",
        data: [""],
        axisLine: { show: false },
        axisTick: [
          {
            show: false,
          },
        ],
      },
    ],
    series: [
      {
        name: "耕地",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              {
                offset: 1,
                color: "#3268F3",
              },
              {
                offset: 0,
                color: "#43FFC3",
              },
            ]),
          },
        },
        barWidth: 15,
        data: [14],
      },
    ],
    tooltip: {
      // 鼠标悬浮提示框显示 X和Y 轴数据
      trigger: "axis",
      backgroundColor: "rgba(32, 33, 36,.7)",
      textStyle: {
        // 文字提示样式
        color: "#fff",
        fontSize: "12",
      },
      formatter: function (params) {
        var relVal = "耕地";
        for (var i = 0, l = params.length; i < l; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
            params[i].value +
            "吨";
        }
        return relVal;
      },
    },
  },

  // 耕地质量统计
  zhiliangtongji: {
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: {},
    radar: {
      name: {
        textStyle: {
          color: "#fff",
        },
      },
      indicator: [],
    },
    series: [],
  },
})
const buildSeries = (data) => {
  const helper = data.map((item, index) => {
    const arr = new Array(data.length);
    arr.splice(index, 1, item);
    return arr;
  });

  return [data, ...helper].map((item, index) => {
    return {
      type: "radar",
      symbol: index === 0 ? "circle" : "none",
      symbolSize: 6,
      itemStyle: {
        color: "#fff",
      },
      areaStyle: {
        color: index === 0 ? "#2b92b8" : "transparent",
        opacity: 0.5,
      },
      tooltip: {
        show: index === 0 ? false : true,
        formatter: function () {
          return (
            state.source.indicator[index - 1].name + "：" + state.source.data[index - 1]
          );
        },
      },
      z: index === 0 ? 1 : 2,
      data: [item],
    };
  });
};
onMounted(() => {
  state.zhiliangtongji.series = buildSeries(state.source.data)
  state.zhiliangtongji.radar.indicator = state.source.indicator
})

</script>

<style lang="scss" scoped>
.cultivated_wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: url("@/images/cultivated/cultivatedBg.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .pageTitle {
    width: 100%;
    height: 83px;
    position: relative;

    .cultivated_title {
      font-size: 30px;
      font-weight: bolder;
      text-shadow: 0px 5px 0px rgba(53, 119, 255, 0.52);
      position: absolute;
      top: 65%;
      transform: translateY(-50%);
      left: 70px;
    }

    .copyright,
    .date,
    .system,
    .user {
      position: absolute;
      font-size: 16px;
      color: #eff7ff;
    }

    .date,
    .system,
    .user {
      width: 156px;
      height: 25px;
      background: url("@/images/cultivated/2.png") no-repeat;
      background-size: 100% 100%;
      top: 25px;
      text-indent: 55px;
      cursor: pointer;
    }

    .copyright {
      top: 40px;
      left: 25%;
    }

    .date {
      right: 312px;
    }

    .system {
      right: 165px;
    }

    .user {
      right: 20px;
    }

    .date:hover,
    .system:hover,
    .user:hover {
      background: url("@/images/cultivated/1.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .pageBody {
    flex: 1;
    display: flex;
    padding: 20px;

    .pageLeft,
    .pageRight {
      width: 460px;
    }

    .pageLeft {

      .l_t>.left_title,
      .l_m>.m_title,
      .l_b>.div_title {
        height: 32px;
        line-height: 32px;
        margin-top: 20px;
        font-size: 20px;
        font-weight: bolder;
        background: url("@/images/cultivated/10.png") no-repeat;
        background-size: 100% 100%;
        text-indent: 15px;
      }

      .l_t {
        flex: 1;

        .echarts_box {
          width: 100%;
          height: calc(100% - 32px);
        }
      }

      .l_m {
        display: flex;
        flex-direction: column;
        flex: 1;

        &_m {
          flex: 2;
          width: 100%;
          // height: 174px;
          display: flex;

          >div {
            flex: 1;
            text-align: center;

            >div:nth-of-type(1) {
              font-size: 24px;
              font-weight: bolder;
              height: 95px;
              line-height: 95px;
              background: url("@/images/cultivated/3.png") no-repeat;
              background-size: 100% 100%;
            }

            >div:nth-of-type(2) {
              font-size: 12px;
              font-weight: bolder;
            }
          }
        }

        &_b {
          flex: 3;
          display: flex;
          margin: 5px;

          >div {
            height: 100%;
          }

          .b_left {
            flex: 2;
            border-right: 1px solid #5d6172;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 10px;
            text-align: center;
            margin-top: 4px;
            height: 79%;
          }

          .b_right {
            flex: 9;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            >div {
              height: 100%;
            }
          }
        }
      }

      .l_b {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 280px;

        .pic {
          flex: 1;
          width: 421px;

          .bgImg {
            width: 100%;
            object-fit: contain;
          }
        }

        .i_1,
        .i_2,
        .i_3,
        .i_4,
        .i_5,
        .i_6 {
          width: 70px;
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          div:nth-of-type(1) {
            font-size: 14px;
            font-weight: bolder;
            line-height: 30px;
          }

          div:nth-of-type(2) {
            font-size: 12px;
          }
        }

        .i_1 {
          top: 29%;
          left: 18%;
        }

        .i_2 {
          top: 45%;
          left: 5.5%;
        }

        .i_3 {
          top: 61%;
          left: 18%;
        }

        .i_4 {
          top: 61%;
          right: 16%;
        }

        .i_5 {
          top: 44%;
          right: 4%;
        }

        .i_6 {
          top: 29%;
          right: 16%;
        }
      }
    }

    .pageMiddle {
      flex: 1;
      margin: 28px 20px 20px 20px;
      padding: 40px;
      background: url("@/images/cultivated/11.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;

      .m_t {
        width: 100%;
        height: 108px;
        display: flex;
        justify-content: space-around;

        .land_item {
          width: 175px;
          height: 108px;
          padding-left: 18px;
          background: url("@/images/cultivated/5.png") no-repeat;
          background-size: 100% 100%;

          .land_name {
            font-size: 18px;
            font-weight: bolder;
            line-height: 44px;
          }

          .land_value {
            line-height: 60px;
            font-size: 20px;
            color: #fbb756;

            span {
              font-size: 14px;
            }
          }
        }
      }

      .m_m {
        flex: 1;
      }

      .m_b {
        height: 20px;
        line-height: 20px;
        display: flex;
        justify-content: space-around;
        font-size: 14px;

        span {
          display: inline-block;
          width: 45px;
          height: 5px;
          border-radius: 3px;
          margin-right: 10px;
        }

        .green {
          background: #4ddb83;
          box-shadow: 0px 0px 3px 2px #4ddb83;
        }

        .blue {
          background: #4791c8;
          box-shadow: 0px 0px 3px 2px #4791c8;
        }
      }
    }

    .pageLeft,
    .pageRight {
      display: flex;
      flex-direction: column;
      padding-left: 40px;
      padding-top: 28px;

      >div {
        margin-bottom: 20px;
        padding: 18px;
        background: url("@/images/cultivated/12.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .pageRight {
      padding-left: 0;
      padding-right: 30px;

      .r_t>.r_t_title,
      .r_m>.r_m_title,
      .r_b>.warning {
        height: 32px;
        margin-top: 20px;
        line-height: 32px;
        font-size: 20px;
        font-weight: bolder;
        background: url("@/images/cultivated/10.png") no-repeat;
        background-size: 50% 100%;
        text-indent: 15px;
      }

      .r_t,
      .r_m {
        // width: 100%;
        height: 100%;

        .echarts_box {
          width: 100%;
          height: calc(100% - 32px);
        }
      }

      .r_b {
        display: flex;
        flex-direction: column;

        .warning {
          margin-bottom: 10px;
        }

        .list_wrapper {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .warning_list {
            line-height: 34px;
            margin-bottom: 7px;
            margin-left: 23px;
            display: flex;
            text-indent: 20px;

            .num {
              width: 20px;
              font-size: 16px;
              font-weight: bolder;
            }

            .red {
              color: #f83f55;
            }

            .yellow {
              color: #c3c147;
            }

            .green {
              color: #4ee5ca;
            }

            .blue {
              color: #39a9ff;
            }

            .purple {
              color: #828af7;
            }

            .title {
              flex: 1;
              font-size: 16px;
              font-weight: bolder;
              color: #5b91df;
            }

            .hot {
              width: 100px;
              line-height: 20px;
              margin-top: 7px;

              span {
                display: inline-block;
                width: 30px;
                height: 20px;
                background: #cc923f;
                border-radius: 8px;
                text-indent: 0;
                text-align: center;
              }

              .new {
                background: #f83f55;
              }
            }
          }

          .first {
            background: url("@/images/cultivated/6.png") no-repeat;
            background-size: 100% 100%;
          }

          .second {
            background: url("@/images/cultivated/7.png") no-repeat;
            background-size: 100% 100%;
          }

          .third {
            background: url("@/images/cultivated/8.png") no-repeat;
            background-size: 100% 100%;
          }

          .normal {
            background: url("@/images/cultivated/9.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
